<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>渲染英雄列表案例</title>
    <link rel="stylesheet" href="css/hero.css" />
  </head>

  <body>
    <!-- 利用对象数组渲染英雄列表案例 -->
    <!-- <ul class="list">
      <li><img src="css/uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
      <li><img src="uploads/heros/01.jpg" title="司马懿" /></li>
    </ul> -->
    <script>
      const datas = [
        { name: "司马懿", imgSrc: "css/uploads/heros/01.jpg" },
        { name: "女娲", imgSrc: "css/uploads/heros/02.jpg" },
        { name: "百里守约", imgSrc: "css/uploads/heros/03.jpg" },
        { name: "亚瑟", imgSrc: "css/uploads/heros/04.jpg" },
        { name: "虞姬", imgSrc: "css/uploads/heros/05.jpg" },
        { name: "张良", imgSrc: "css/uploads/heros/06.jpg" },
        { name: "安其拉", imgSrc: "css/uploads/heros/07.jpg" },
        { name: "李白", imgSrc: "css/uploads/heros/08.jpg" },
        { name: "阿珂", imgSrc: "css/uploads/heros/09.jpg" },
        { name: "墨子", imgSrc: "css/uploads/heros/10.jpg" },
        { name: "鲁班", imgSrc: "css/uploads/heros/11.jpg" },
        { name: "嬴政", imgSrc: "css/uploads/heros/12.jpg" },
        { name: "孙膑", imgSrc: "css/uploads/heros/13.jpg" },
        { name: "周瑜", imgSrc: "css/uploads/heros/14.jpg" },
        { name: "老夫子", imgSrc: "css/uploads/heros/15.jpg" },
        { name: "狄仁杰", imgSrc: "css/uploads/heros/16.jpg" },
        { name: "扁鹊", imgSrc: "css/uploads/heros/17.jpg" },
        { name: "马可波罗", imgSrc: "css/uploads/heros/18.jpg" },
        { name: "露娜", imgSrc: "css/uploads/heros/19.jpg" },
        { name: "孙悟空", imgSrc: "css/uploads/heros/20.jpg" },
      ]
      let sum = ""
      for (let i = 0; i < 20; i++) {
        sum += `
					<li><img src="${datas[i].imgSrc}" title="${datas[i].name}" /></li>
					`
      }
      document.write(`<ul class="list">${sum}</ul>`)
    </script>
  </body>
</html>
